<template>
  <div class="coupon-list">
    <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
      <div v-for="(item, index) in couponList" :key="index" class="couponcard" v-if="couponList.length">
        <div class="couponcard1">
          <i>￥</i>{{ item.voucherAmount }}
          <p>无门槛券</p>
        </div>
        <div class="couponcard2">
          <p class="couponcard2-1">{{ item.voucherName }}</p>
          <p class="couponcard2-2">有效期{{ item.effectiveTime }}</p>
        </div>
        <div class="couponcard3">
          <img :src="item.voucherStatus == 0 ? notused : item.voucherStatus == 1 ? used : expired" alt="">
        </div>
      </div>
      <van-empty :image="empty" image-size="200" description="暂无数据" v-if="!couponList.length && loading == false" />
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { getVoucherList } from "@/services/home";
import { onMounted, defineProps, ref } from "vue";
import empty from "@/assets/empty.png";
import notused from "@/assets/mine/notused.png";
import used from "@/assets/mine/used.png";
import expired from "@/assets/mine/expired.png";
const total = ref();
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
const couponList = ref([
]);
const props = defineProps({
  voucherStatus: Number
});
const onLoad = () => {
  getVoucherList({ pageNum: pageNum.value++, voucherStatus: props.voucherStatus }).then(res => {
    if (res.code == 200) {
      couponList.value = couponList.value.concat(res.rows)
      total.value = res.total
      // 加载状态结束
      loading.value = false;
      // 数据全部加载完成
      if (couponList.value.length >= total.value) {
        finished.value = true;
      }
    }
  })
};
</script>

<style lang="scss" scoped>
.coupon-list {
  padding-top: 50px;
  padding-bottom: 10px;

  .couponcard {
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 343px;
    height: 92px;
    background-color: #fff;
    // background: url(@/assets/activity/bg.png) no-repeat;
    background-size: cover;
    margin-bottom: 10px;

    // padding: 0 12px;
    .couponcard1 {
      border-right: 2px dashed #ccc;
      padding: 10px;
      width: 70px;
      text-align: center;
      font-size: 20px;
      color: #f65d3e;

      i {
        font-style: inherit;
        font-size: 12px;
      }

      p {
        font-size: 12px;
      }
    }

    .couponcard2 {
      padding-left: 5px;
      text-align: center;

      .couponcard2-1 {
        font-size: 14px;
        padding-bottom: 4px;
        width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .couponcard2-2 {
        color: rgba(163, 174, 182, 1);
        font-size: 12px;
        width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -1px;
      }
    }

    .couponcard3 {
      color: #fff;
      width: 67px;
      height: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>